<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    {{template "link/customer/link.html" . }}
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

{{template "link/customer/nav.html" . }}
{{template "link/customer/header.html" .}}


<div class="content content-nav-base commodity-content">
    {{template "link/customer/navBar.html" .}}
    <div class="commod-cont-wrap">
        <div class="commod-cont w1200 layui-clear">
            <div class="left-nav">
                <div class="title">所有分类</div>
                <div class="list-box">
                    {{ range .SystemType}}
                        <dl>
                            <dt>{{.SystemTypeName}}</dt>
                            {{range  .SubMenu}}
                                <dd><a href="/customer/goods?MenuId={{.SystemMenuId}}">{{.SystemMenuName}}</a></dd>
                            {{end}}
                        </dl>
                    {{end}}
                </div>
            </div>
            <div class="right-cont-wrap">
                <div class="right-cont">
                    <div class="sort layui-clear">
                        <form action="">
                            <a class="active" href="javascript:;" event='volume'>销量</a>
                            <a href="javascript:;" event="comment">评分</a>
                            <a href="javascript:;" event='price'>价格</a>
                            <span style="margin-left: 25px">最低价</span>

                            <div class="layui-input-inline">
                                <input type="text" value="" class="layui-input" style="height: 25px">
                            </div>
                            <input type="text" hidden="hidden" name="title" value="{{.Title}}">
                            <span>最高价</span>
                            <div class="layui-input-inline">
                                <input type="text" value="" class="layui-input" style="height: 25px">
                            </div>
                            <button class="layui-btn layui-btn-normal" style="height: 25px; line-height: 15px;">查询
                            </button>
                        </form>
                    </div>
                    <div class="prod-number">
                        <span>{{.Number}}</span>
                    </div>
                    <div class="cont-list layui-clear" id="list-cont">
                        {{range .Goods}}
                            <div class="item">
                                <div class="img">
                                    <a href="/customer/goodDetail?id={{.GoodId}}"><img class="good-img"
                                                                                       src="/static/upload/good/{{ .GoodUrl }}"></a>
                                </div>
                                <div class="text">
                                    <p class="price">
                                        <span class="pri" style="font-size: 20px">￥ {{.GoodPrices}}</span>
                                        <span class="nub">销量:{{.GoodCount}}</span>
                                    </p>
                                    <p class="title" style="position: relative;top: 11px;font-size: 13px">{{.GoodName}}</p>
                                </div>
                                <div class="text">
                                    <p><a style="color: #888" href="/customer/store?storeId={{.GoodStoreId}}">店铺:{{.GoodStoreName   }}</a></p>
                                </div>
                            </div>
                        {{end}}
                    </div>
                    <div id="demo0" style="text-align: center;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    layui.config({
        base: '/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['mm', 'laypage', 'jquery'], function () {
        var laypage = layui.laypage, $ = layui.$,
            mm = layui.mm;
        laypage.render({
            elem: 'demo0'
            , count: 100 //数据总数
        });


        // 模版引擎导入
        //  var html = demo.innerHTML;
        //  var listCont = document.getElementById('list-cont');
        //  // console.log(layui.router("#/about.html"))
        // mm.request({
        //     url: '../json/commodity.json',
        //     success : function(res){
        //       console.log(res)
        //       listCont.innerHTML = mm.renderHtml(html,res)
        //     },
        //     error: function(res){
        //       console.log(res);
        //     }
        //   })

        $('.sort a').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
        $('.list-box dt').on('click', function () {
            if ($(this).attr('off')) {
                $(this).removeClass('active').siblings('dd').show()
                $(this).attr('off', '')
            } else {
                $(this).addClass('active').siblings('dd').hide()
                $(this).attr('off', true)
            }
        })

    });
</script>


</body>
</html>